<template>
	<view class="pages-card bgc-w ml-30 mb-20" v-if="info.sn">
		<view class="money fc-ac fs-lg fw-9">
			{{info.money}}
		</view>
		<image class="state-img" src="/static/images/common/withdraw-1.png" mode="scaleToFill"
			v-if="info.status==1||info.status==2"></image>
		<view class="flex align-items-center pt-10  ">
			<view class="title mr-20">
				收款人
			</view>
			<view class="fc-0">
				{{info.real_name}}
			</view>
		</view>
		<view class="flex align-items-center pt-10 ">
			<view class="title mr-20">
				收款方式
			</view>
			<view class="fc-0">
				微信钱包
			</view>
		</view>
		<view class="flex align-items-center pt-10 ">
			<view class="title mr-20">
				支付时间
			</view>
			<view class="fc-0">
				{{info.update_time||info.create_time}}
			</view>
		</view>
		<view class="flex align-items-center pt-10 ">
			<view class="title mr-20">
				付款单号
			</view>
			<view class="fc-0">
				{{info.sn}}
			</view>
		</view>
		<view class="flex align-items-center pt-10 ">
			<view class="title mr-20">
				手续费
			</view>
			<view class="fc-0">
				{{info.handling_fee}}
			</view>
		</view>
		<view class="flex align-items-center pt-10 ">
			<view class="title mr-20">
				实收金额
			</view>
			<view class="fc-warn">
				{{info.left_money}}
			</view>
		</view>
		<view class="">
			{{info.update_time||info.create_time}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {

		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			}
		}

	}
</script>

<style lang="scss" scoped>
	.pages-card {
		position: relative;
	}

	.title {
		width: 140rpx;
		// text-align: justify;
		// text-align-last: justify;

	}

	.justified-text-last-line {}

	.money {
		font-size: 48rpx;
		position: absolute;
		right: 24rpx;
		top: 32rpx;
		z-index: 1;
	}

	.state-img {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		right: 20rpx;
		bottom: 20rpx;
	}
</style>